{% extends 'layout/manage.html' %}
{% load issues %}
{% block css %}
    {% load static %}
    <link rel="stylesheet" href="{% static 'plugin/editor.md-master/css/editormd.min.css' %}">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">

{#    <link rel="stylesheet" href="{% static 'plugin/mhxl/index.css' %}">#}
    <style>
        .panel-body > .col-sm-3 {
            padding-right: 10px;
            padding-left: 10px;
        }

        .panel-body > .col-sm-9 {
            padding-right: 10px;
            padding-left: 10px;
        }

        .issues-list .number {
            width: 100px;
            text-align: right;
        }

        .issues-list .number a {
            font-weight: 500;
            padding: 0 10px;
        }

        .issues-list .issue .tags {
            padding: 10px 0;
        }

        .issues-list .issue .tags span {
            margin-right: 20px;
            display: inline-block;
            font-size: 12px;
        }

        .issues-list .issue .tags .type {
            color: white;
            padding: 1px 5px;
            border-radius: 5px;
        }

        .pd-0 {
            padding: 0 !important;
        }


    </style>
{% endblock %}
{% block content %}
    <div class="panel-body">
        <div class="col-sm-3 title-list">

            <div class="panel panel-primary">
                <div class="panel-heading">筛 选</div>
                <div class="panel-body">
                    <div style="margin-bottom: 20px">问题类型</div>
                    <div style="overflow: hidden">
                        <span class="col-sm-3" style="color: #00a8c6"> <input name="save" id="save" type="checkbox" value="&problem_type=function">功能</span>
                        <span class="col-sm-3" style="color: #00a8c6"><input name="save" id="save" type="checkbox" class="col-sm-3" value="&problem_type=BUG"> Bug</span>
                        <span class="col-sm-3" style="color: #00a8c6"><input name="save" id="save" type="checkbox" class="col-sm-3" value="&problem_type=task"> 任务</span>
                    </div>
                    <div style="margin-bottom: 20px;margin-top: 20px">问题类型</div>
                    <div style="overflow: hidden">
                        <span class="col-sm-3" style="color: #00a8c6"> <input name="save" id="save" type="checkbox" value="&statused=new"> 新建</span>
                        <span class="col-sm-3" style="color: #00a8c6"><input name="save" id="save" type="checkbox" class="col-sm-3" value="&statused=process">处理中</span>
                        <span class="col-sm-3" style="color: #00a8c6"><input name="save" id="save" type="checkbox" class="col-sm-3" value="&statused=solve"> 已解决</span>
                        <span class="col-sm-3" style="color: #00a8c6"><input name="save" id="save" type="checkbox" class="col-sm-3" value="&statused=ignore"> 已忽略</span>
                    </div>
                    <div style="overflow: hidden ;padding:10px 0">
                        <span class="col-sm-3" style="color: #00a8c6"> <input name="save" id="save" type="checkbox" class="col-sm-3" value="&statused=feedback"> 待反馈</span>
                        <span class="col-sm-3" style="color: #00a8c6"><input name="save" id="save" type="checkbox" class="col-sm-3" value="&statused=close"> 已关闭</span>
                        <span class="col-sm-3" style="color: #00a8c6"><input name="save" id="save" type="checkbox" class="col-sm-3" value="&statused=reopen"> 重新打开</span>

                    </div>
                    <div id="box">
                        <div class="box">
                            <h5>派遣</h5>

                            <div class="dropdown custom1">
                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                                    <em>请选择</em>
                                    <i class="caret"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <input class="form-control seach_name" placeholder="请输入搜索内容">
                                        <i class="glyphicon glyphicon-search"></i>
                                    </li>
                                    <li data="{{ request.user_id }}"><a>{{ request.user_name }}</a></li>
{#                                                                    <li data="blue"><a>blue</a></li>#}
{#                                                                    <li data="gray"><a>gray</a></li>#}
{#                                                                    <li data="green"><a>green</a></li>#}
                                </ul>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-sm-9 content">

            <div class="panel panel-primary">
                <div class="panel-heading">问 题</div>
                <div class="panel-body">
                    {#                    <p> <!--.bs-example-modal-lg -->#}
                    {#                        <button class="btn btn-success btn-sm" type="button" data-toggle="modal"  data-target="#addModal">新建问题</button>#}
                    {#                        <button type="button" class="btn btn-primary btn-sm">邀请成员</button>#}
                    {#                    </p>#}
                    <div class="panel-body">
                        <a class="btn btn-success btn-sm" data-toggle="modal" data-target="#addModal">新建问题</a>
                        <a class="btn btn-primary btn-sm" data-toggle="modal" data-target="#inviteModal">邀请成员</a>
                    </div>
                    <table class="table">
                        <tbody class="issues-list">
                        {% for i in problem %}
                            <tr>
                                <td class="number">
                                    <i class="fa fa-circle text-danger"></i>
                                    <a href="#" target="_blank">{% string_just i.0 %}</a>
                                </td>
                                <td class="issue">
                                    <div class="type">
                                        <a href="{% url 'issues_detail' request.obj.0.0 i.0 %}" target="_blank">{{ i.1 }}</a>
                                    </div>
                                    <div class="tags">
                                        <span class="type" style="background-color:#56b8eb;">{{ i.3 }}</span>
                                        <span>
                                            <i class="fa fa-refresh" aria-hidden="true"></i>{{ i.5 }}
                                        </span>

                                        <span data-val="{{ i.8 }}">
                                            <i class="fa fa-clock-o" aria-hidden="true"></i> {{ i.14 }}
                                        </span>
                                        <span>
                                            <i class="fa fa-hand-o-right" aria-hidden="true"></i>{{ i.18 }}
                                        </span>
                                        <span>
                                            <i class="fa fa-clock-o" aria-hidden="true"></i>{{ i.10 }}
                                        </span>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}

                        </tbody>
                    </table>
                </div>
                <nav aria-label="...">
                    <ul class="pagination">
                        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                        <li class="active hide"><a name="btned" id="pages" href="{% url 'issues' request.obj.0.0 %}?page=0"> </a></li>
                        {% for i in problem_list %}
                            {% if i == lim %}
                                <li class="active"><a name="btned" id="pages" href="{% url 'issues' request.obj.0.0 %}?page={{ i }}">{{ i }} </a></li>
                            {% else %}
                                <li class=""><a name="btned" id="pages" href="{% url 'issues' request.obj.0.0 %}?page={{ i }}">{{ i }} </a></li>
                            {% endif %}
                            <li class="hide"><a name="btned" id="pages" href="{% url 'issues' request.obj.0.0 %}?page={{ i }}">{{ i }} </a></li>
                        {% endfor %}
                        {#                        <span class="sr-only">(current)</span>#}


                        <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>


                    </ul>
                </nav>
            </div>
        </div>
    </div>

    </div>

    <!-- Large modal -->
    <div id="addModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                    <h4 class="modal-title">新建问题</h4>
                </div>
                <div class="modal-body" style="padding-right: 40px">
                    <form class="form-horizontal" id="addForm">
                        {% csrf_token %}
                        {#                        {% for i in form %}#}
                        {#                        <div class="form-group">#}
                        {#                            <label for="{{ i.id_for_label }}" class="col-sm-1 control-label">{{ i.label }}</label>#}
                        {#                            <div class="col-sm-10">#}
                        {#                                {{ i }}#}
                        {#                            </div>#}
                        {#                            <span class="errors">{{ i.errors.0 }}</span>#}
                        {#                        </div>#}
                        {#                        {% endfor %}#}
                        <div class="form-group">
                            <label for="{{ form.the_title.id_for_label }}" class="col-sm-1 control-label">{{ form.the_title.label }}</label>
                            <div class="col-sm-10">
                                <div>
                                    {{ form.the_title }}
                                </div>
                                <div><span class="errors">{{ form.the_title.errors.0 }}</span></div>
                            </div>

                        </div>

                        <div class="form-group">
                            <label for="{{ form.the_content.id_for_label }}" class="col-sm-1 control-label">{{ form.the_content.label }}</label>
                            <div class="col-sm-10">
                                <div>
                                    <div id="editor">
                                        {{ form.the_content }}
                                    </div>
                                </div>
                                <div><span class="errors">{{ form.the_content.errors.0 }}</span></div>
                            </div>

                        </div>
                        <div class="form-group clearfix">
                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.problem_type.id_for_label }}" class="col-sm-4 control-label">{{ form.problem_type.label }}</label>
                                <div class="col-sm-5">


                                    {{ form.problem_type }}


                                    <div><span class="errors">{{ form.problem_type.errors.0 }}</span></div>
                                </div>
                            </div>

                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.modular.id_for_label }}" class="col-sm-4 control-label">{{ form.modular.label }}</label>
                                <div class="col-sm-5">

                                    <div>
                                        {{ form.modular }}
                                    </div>

                                    <div><span class="errors">{{ form.modular.errors.0 }}</span></div>
                                </div>
                            </div>

                        </div>

                        <div class="form-group ">
                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.statused.id_for_label }}" class="col-sm-4 control-label">{{ form.statused.label }}</label>
                                <div class="col-sm-5">

                                    <div>
                                        {{ form.statused }}
                                    </div>

                                    <div><span class="errors">{{ form.statused.errors.0 }}</span></div>
                                </div>
                            </div>

                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.assign_user_information.id_for_label }}" class="col-sm-4 control-label">{{ form.assign_user_information.label }}</label>
                                <div class="col-sm-5">

                                    <div>
                                        {{ form.assign_user_information }}
                                    </div>


                                    <div><span class="errors">{{ form.assign_user_information.errors.0 }}</span></div>
                                </div>
                            </div>


                        </div>
                        <div class="form-group ">
                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.follow_user_information.id_for_label }}" class="col-sm-4 control-label">{{ form.follow_user_information.label }}</label>
                                <div class="col-sm-5">

                                    <div>
                                        {{ form.follow_user_information }}
                                    </div>


                                    <div><span class="errors">{{ form.follow_user_information.errors.0 }}</span></div>
                                </div>
                            </div>
                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.start_time.id_for_label }}" class="col-sm-4 control-label">{{ form.start_time.label }}</label>
                                <div class="col-sm-5">

                                    <div class="input-group">
                                            <span class="input-group-addon" id="'sizing-addon1'">
                                                <i class="fa fa-calendar" aria-hidden="true"></i>
                                            </span>
                                        {{ form.start_time }}
                                    </div>

                                    <div><span class="errors">{{ form.start_time.errors.0 }}</span></div>
                                </div>
                            </div>


                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.end_time.id_for_label }}" class="col-sm-4 control-label">{{ form.end_time.label }}</label>
                                <div class="col-sm-5">

                                    <div class="input-group">
                                            <span class="input-group-addon" id="'sizing-addon2'">
                                                <i class="fa fa-calendar" aria-hidden="true"></i>
                                            </span>
                                        {{ form.end_time }}
                                    </div>

                                    <div><span class="errors">{{ form.end_time.errors.0 }}</span></div>
                                </div>
                            </div>


                        </div>
                        <div class="form-group  clearfix">
                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.pattern.id_for_label }}" class="col-sm-4 control-label">{{ form.pattern.label }}</label>
                                <div class="col-sm-5">

                                    <div>
                                        {{ form.pattern }}
                                    </div>

                                    <div><span class="errors">{{ form.pattern.errors.0 }}</span></div>
                                </div>
                            </div>

                            <div class="form-group col-sm-6 pd-0">
                                <label for="{{ form.parent_problem.id_for_label }}" class="col-sm-4 control-label">{{ form.parent_problem.label }}</label>
                                <div class="col-sm-5">

                                    <div>
                                        {{ form.parent_problem }}
                                    </div>

                                    <div><span class="errors">{{ form.parent_problem.errors.0 }}</span></div>
                                </div>
                            </div>


                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" class="btn btn-primary" id="btnAddSubmit">添 加</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script src="{% static 'plugin/editor.md-master/editormd.min.js' %}"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    {#    var WIKI_DETAIL_URL = '{% url 'wiki' project_id=request.obj.0.0 %}';#}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/i18n/defaults-zh_CN.min.js"></script>

    <script src="{% static 'plugin/mhxl/index.js' %}"></script>
    <script>
        POST_ISSUES = '{% url 'issues' request.obj.0.0 %}';
        $(function () {
            bindBootStrapShowEvent();
            {#sssss();#}
            mhxl()
            emChange();
        });

        function bindBootStrapShowEvent() {
            $('#addModal').on('show.bs.modal', function (event) {
                // 对话框弹出时候 内容触发
                {#initEdtorMd();#}
                {#initDatePicker();#}
                {#bindAddSumMd();#}


            })
        }

        // 初始化edotor
        function initEdtorMd() {
            editormd('editor', {
                placeholder: "请输入内容",
                height: 300,
                path: '{% static 'plugin/editor.md-master/lib/' %}',
                imageUpload: true,
                imageFormats: ['jpg', 'png', 'gif', 'jpeg'],
                imageUploadURL: '{% url 'wiki_upload' project_id=request.obj.0.0%}'
            })
        }


        function initDatePicker() {
            $('#id_start_time,#id_end_time').datepicker({
                format: 'yyyy-mm-dd 00:00:00',   //2020-06-10
                startData: '0',
                language: 'zh-CN',
                autoclose: true
            })
        }

        //普通的绑定会随着你调用的地方增加而增加的， 用这个方法可以可以解决
        function bindAddSumMd() {
            $('#btnAddSubmit').unbind('click').bind('click', function () {
                console.log($('#addForm').serialize())
                $.ajax({
                    url: POST_ISSUES,
                    type: "post",
                    data: $('#addForm').serialize(),
                    dataType: 'JSON',
                    success: function (res) {
                        console.log(res);
                        if (res.status) {
                            location.href = location.href
                        } else {
                            $.each(res.error, function (k, y) {
                                $('#id_' + k).parent().next().html(y[0])
                            })
                        }
                    }
                })
            })
        }


        var dd = document.querySelector(".pagination");
        var ssss = dd.querySelectorAll('#pages');
        var sav = document.querySelectorAll('#save');
        // 动态页面根据后台发过来的数据来渲染对号框
        var dices = '{{ re_str }}'.replace(/\amp;/g, '')
        // 多个input  进行检测
        //$.each(rerred, function (idnex,item) {
        for (var i = 0; i < sav.length; i++) {
            {#console.log(item)#}
            var res = new RegExp(sav[i].value);
            if (res.test(dices)) {

                sav[i].checked = 'checked';
                for (var j = 0; j < ssss.length; j++) {
                    ssss[j].href = ssss[j].href + sav[i].value;
                }


            }
        }
        //})

        // 静态页面控制分页的url
        function sssss() {
            $('#save').click(function () {

                for (var i = 0; i < ssss.length; i++) {
                    if (ssss[i].href.match($('#save').val())) {
                        ssss[i].href = ssss[i].href.replace($('#save').val(), '')

                    } else {
                        ssss[i].href = ssss[i].href + $('#save').val();
                        console.log('我啊下了')

                    }
                }
            })

        }

        for (var i = 0; i < sav.length; i++) {
            sav[i].onclick = (function () {
                var valee = encodeURI(this.value);

                for (var j = 0; j < ssss.length; j++) {
                    if (ssss[j].href.match(valee)) {
                        ssss[j].href = ssss[j].href.replace(valee, '');
                        location.href = ssss[0].href;
                        console.log('去拿个ur' + ssss[j].href)
                    } else {
                        ssss[j].href = ssss[j].href + valee;
                        console.log('我按下了');
                        location.href = ssss[0].href;
                        console.log('去拿个ur' + ssss[j].href)
                    }
                }
            })
        }
        {#console.log(decodeURI('任务','gb-2312'))#}

        function chosen() {
            $('.form-control-chosen').chosen({
                allow_single_deselect: true,
                width: '100%'
            });
            $('.form-control-chosen-required').chosen({
                allow_single_deselect: false,
                width: '100%'
            });
            $('.form-control-chosen-search-threshold-100').chosen({
                allow_single_deselect: true,
                disable_search_threshold: 100,
                width: '100%'
            });
            $('.form-control-chosen-optgroup').chosen({
                width: '100%'
            });

            $(function () {
                $('[title="clickable_optgroup"]').addClass('chosen-container-optgroup-clickable');
            });
            $(document).on('click', '[title="clickable_optgroup"] .group-result', function () {
                var unselected = $(this).nextUntil('.group-result').not('.result-selected');
                if (unselected.length) {
                    unselected.trigger('mouseup');
                } else {
                    $(this).nextUntil('.group-result').each(function () {
                        $('a.search-choice-close[data-option-array-index="' + $(this).data('option-array-index') + '"]').trigger('click');
                    });
                }
            });
        }

        // 初始化输入框插件
        function mhxl() {
            new DropdownSearch('.box');  //custom1

        }

        // 输入框变化 触发事件
        function emChange() {
            $('.box li').click(function () {
                location.href = POST_ISSUES + '?assign_user_information=' + $(this).attr('data')
            })
        }

        console.log($('.box').find('em').html())
    </script>
{% endblock %}
